<template>
    <div class="wrapper">
        <div class="blue ball"></div>
        <div class="red ball"></div>
        <div class="yellow ball"></div>
        <div class="green ball"></div>
    </div>
</template>
<style scoped>
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
}

.ball {
  --size: 5px;
  width: var(--size);
  height: var(--size);
  border-radius: 11px;
  margin: 0 5px;

  animation: 2s bounce ease infinite;
}

.blue {
  background-color: #4285f5;
}

.red {
  background-color: #ea4436;
  animation-delay: 0.25s;
}

.yellow {
  background-color: #fbbd06;
  animation-delay: 0.5s;
}

.green {
  background-color: #34a952;
  animation-delay: 0.75s;
}

@keyframes bounce {
  50% {
    transform: translateY(10px);
  }
}

</style>